<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">

      <el-input @keyup.enter.native="handleFilter" v-model="listQuery.patrolName" style="width: 200px;" class="filter-item" placeholder="巡查人员名">
      </el-input>

      <el-date-picker style="width: 200px;" class="filter-item" v-model="listQuery.startDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间">
      </el-date-picker>

      <el-date-picker style="width: 200px;" class="filter-item" v-model="listQuery.endDate" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间">
      </el-date-picker>

      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>

      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleDownload">导出</el-button>
    </div>

    <el-table :key='tableKey' :data="list" id="patrol_table" v-loading="listLoading" element-loading-text="给我一点时间" stripe border fit highlight-current-row style="width: 100%">

      <el-table-column align="center" label="巡查人员">
        <template slot-scope="scope">
          <span>
           {{scope.row.patrolName}}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="时间范围">
        <template slot-scope="scope">
          <span>{{scope.row.timeLimit}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="记录类型">
        <template slot-scope="scope">
          <span>{{scope.row.patrolType | statusFilter}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="内容">
        <template slot-scope="scope">
          <span>{{scope.row.content}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import { fetchList } from '@/api/patrol/patrol'
import waves from '@/directive/waves/index.js' // 水波纹指令
// import { parseTime } from '@/utils'
import { mapGetters } from 'vuex'
// import FileSaver from 'file-saver'
// import XLSX from 'xlsx'

export default {
  name: 'table_patrol',
  directives: {
    waves
  },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        patrolName: '',
        startDate: '',
        endDate: ''
      },
      tableKey: 0
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: '灯箱',
        2: '标箱',
        3: '标识'
      }
      return statusMap[status]
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.orderByField = ''
      this.listQuery.isAsc = true
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    // exportExcel() {
    //   this.pagesize = this.total // 表格长度变长
    //   // console.info(this.pagesize)
    //   this.currentPage = 1
    //   this.$nextTick(function() {
    //     var wb = XLSX.utils.table_to_book(document.querySelector('#patrol_table'))
    //     var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'buffer' })
    //     try {
    //       FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '巡查记录.xlsx')
    //     } catch (e) { if (typeof console !== 'undefined') console.log(e, wbout) }
    //     this.pagesize = 20
    //     return wbout
    //   })
    // },
    handleDownload() {
      const lq = this.listQuery
      lq.limit = this.total
      fetchList(lq).then(response => {
        require.ensure([], () => {
          const { export_json_to_excel } = require('@/vendor/Export2Excel')
          const tHeader = ['巡查人员', '时间范围', '记录类型', '内容', '创建时间']
          const filterVal = ['patrolName', 'timeLimit', 'patrolType', 'content', 'createTime']
          const list = response.data.records
          for (const item of list) {
            switch (item.patrolType) {
              case 1:
                item.patrolType = '灯箱'
                break
              case 2:
                item.patrolType = '标箱'
                break
              case 3:
                item.patrolType = '标识'
                break
            }
          }
          this.listLoading = false
          const data = this.formatJson(filterVal, list)
          export_json_to_excel(tHeader, data, '巡视记录')
        })
        this.listQuery.limit = 20
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    }
  }
}
</script>
